<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/source-m.css">
</head>
<body>
<ul class="time-line">
    <li class="line"></li>
    <li>
        <div class="left">
            <span class="year">2018</span>
            <span class="date">10/10</span>
        </div>
        <div class="right">
            <p class="title">花芽形态分化期</p>
            <p class="desc">花芽形态分化期花芽形态分化期花芽形态分化期</p>
            <div class="pic">
                <img src="./images/b1.jpg" alt="">
            </div>
        </div>
    </li>
    <li>
        <div class="left">
            <span class="year">2018</span>
            <span class="date">10/10</span>
        </div>
        <div class="right">
            <p class="title">花芽形态分化期</p>
            <p class="desc">花芽形态分化期花芽形态分化期花芽形态分化期</p>
            <div class="pic">
                <img src="./images/b2.jpg" alt="">
            </div>
        </div>
    </li>
    <li>
        <div class="left">
            <span class="year">2018</span>
            <span class="date">10/10</span>
        </div>
        <div class="right">
            <p class="title">花芽形态分化期</p>
            <p class="desc">花芽形态分化期花芽形态分化期花芽形态分化期</p>
            <div class="pic">
                <img src="./images/b1.jpg" alt="">
            </div>
        </div>
    </li>
    <li>
        <div class="left">
            <span class="year">2018</span>
            <span class="date">10/10</span>
        </div>
        <div class="right">
            <p class="title">花芽形态分化期</p>
            <p class="desc">花芽形态分化期花芽形态分化期花芽形态分化期</p>
            <div class="pic">
                <img src="./images/b2.jpg" alt="">
            </div>
        </div>
    </li>

</ul>
<script src="./js/df.js"></script>
<script src="./js/scrollreveal.js"></script>
<script>
    +function () {
        var li = document.querySelectorAll('.time-line li:not(.line)');
        window.sr = ScrollReveal();
        sr.reveal('.time-line li:not(.line)', {
            origin: 'top',
            duration: 1000,
            rotate: {x: 65},
            mobile: true,
            useDelay: 'always',
            distance:'100px',
            container: document.querySelector('.time-line')
        }, 100);

        sr.reveal('.time-line .line', {
            duration: li.length * 500,
            mobile: true,
            scale: 0,
            rotate: {x: 0},
            delay: li.length * 2 * 100,
        });
    }()
</script>
</body>
</html>